<template>
  <!-- 广告计划 -->
  <div>
    <div class="batch-block">
      <div class="title">
        <div class="title-row">
          <span>所属广告投放账号:</span>
          <div class="title-content">
            <a-list item-layout="horizontal" :data-source="accounts">
              <a-list-item slot="renderItem" slot-scope="item" >
                {{ item.name+'('+item.account_id+')' }}
              </a-list-item>
            </a-list>
          </div>
        </div>
        <div class="title-row">
          <span>广告组:</span>
          <div class="title-content">
            <a-list item-layout="horizontal" :data-source="campaigns">
              <a-list-item slot="renderItem" slot-scope="item" >
                {{ '【 ' + item.name + ' 】' }}
              </a-list-item>
            </a-list>
          </div>
        </div>
        <div class="title-row">
          <span>推广目标:</span>
          <div class="title-content"> {{ this.$cycle(landingType,this.$global.landingType) }} </div>
        </div>
      </div>
    </div>
    <div class="batch-block">
      <div class="batch-form-model">
        <a-form-model
          ref="ruleForms"
          :model="adForm"
          :rules="rules"
          label_align='right'
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 18 }"
        >
          <!-- 投放范围 -->
          <div class="formModel">
            <div class="formModel-title">投放范围及推广平台：</div>
            
            <!-- <a-form-model-item label="投放平台">
              <a-radio-group
                v-model="adForm.app_type"
                button-style="solid"
                defaultValue="ANDROID"
              >
                <a-radio-button value="ANDROID"> Android </a-radio-button>
                <a-radio-button value="IOS"> Ios </a-radio-button>
              </a-radio-group>
            </a-form-model-item> -->
            
            <a-form-model-item label="投放范围">
              <a-radio-group
                v-model="adForm.delivery_range"
                button-style="solid"
              >
                <a-radio-button value="DEFAULT"> 默认 </a-radio-button>
                <a-radio-button value="UNION"> 穿山甲 </a-radio-button>
              </a-radio-group>
            </a-form-model-item>

            <a-form-model-item v-if="adForm.delivery_range && adForm.delivery_range==='UNION'" label="投放形式">
              <a-radio-group
                v-model="adForm.union_video_type"
                button-style="solid"
              >
                <a-radio-button
                  v-for="(item,index) in this.$global.unionVideoType"
                  :key="index"
                  :value="item.value"
                >
                  {{ item.label }}
                </a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </div>
          <!-- 定向包 -->
          <div class="formModel">
            <div class="formModel-title">用户定向：</div>
            <a-form-model-item label="定向包"> <!-- prop="package" -->
              <a-button type="primary" @click=" v => { this.is_package = true }">
                选择定向包
              </a-button>
              <!-- 显示 -->
              <package v-model="adForm.package" @closePackage="closePackage"></package>
              <!-- 弹窗 -->
                <!-- @showPackage="showPackage" -->
              <select-package
                :isPackage.sync="is_package"
                @getAllPackage="getAllPackage"
                v-if="is_package"
              ></select-package>
            </a-form-model-item>
          </div>
          <!-- 投放目标 -->
          <div class="formModel">
            <div class="formModel-title">投放目标</div>
            <a-form-model-item label="投放目标">
              <a-radio-group
                v-model="adForm.pricing"
                button-style="solid"
                @change="pricingChange"
              >
                <a-radio-button
                  :disabled="true"
                  v-for="(item,index) in this.$global.pricingType"
                  :key="index"
                  :value="item.value"
                >
                  {{ item.label }}
                </a-radio-button>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="下载方式" prop="landingType">
              <a-radio-group
                v-model="adForm.download_type"
                button-style="solid"
                :disabled="true"
                @change="downloadTypeChang"
              >
                <a-radio-button
                  v-for="(item,index) in this.$global.downloadType"
                  :key="index"
                  :value="item.value"
                >
                  {{ item.label }}
                </a-radio-button>
              </a-radio-group>
            </a-form-model-item>
            
            <a-form-model-item label="转化配置"  prop="landingType">
              <span style="font-size:16px;color:#FF6566;"> 请在创建最后一步「批量规则」中配置 </span>
            </a-form-model-item>
          </div>
          <!-- 出价与预算 -->
          <div class="formModel">
            <div class="formModel-title">出价与预算</div>

            <a-form-model-item label="出价方式" prop="smart_bid_type">
              <a-radio-group
                v-model="adForm.smart_bid_type"
                :disabled="true"
                button-style="solid"
              >
                <a-radio-button
                  v-for="(item,index) in this.$global.bidType"
                  :key="index"
                  :value="item.value"
                >
                  <!-- :disabled=" item.value === 'SMART_BID_CONSERVATIVE' " -->
                  {{ item.label }}
                </a-radio-button>
              </a-radio-group>
              <!-- <span>自动出价会根据您的预算，寻找最优成本（包括深度转化）。仅支持 oCPM计费</span> -->
            </a-form-model-item>

            <a-form-model-item label="投放方式">
              <a-radio-group
                v-model="adForm.flow_control_mode"
                button-style="solid"
              >
                <a-radio-button
                  v-for="(item,index) in flowControl"
                  :key="index"
                  :value="item.value"
                >
                  {{ item.label }}
                </a-radio-button>
              </a-radio-group>
            </a-form-model-item>

            <a-form-model-item label="广告预算">
              <div style="display: flex;">
                <a-form-model-item>
                  <a-select
                    v-model="adForm.budget_mode"
                    style="width: 120px"
                    @change="budgetModeChange"
                  >
                    <a-select-option v-for="item,index in this.$global.budgetMode" :key="index" :value="item.value"> {{ item.label }}</a-select-option>
                  </a-select>
                </a-form-model-item>
                <a-form-model-item prop="budget">
                  <a-input-number
                    v-model="adForm.budget"
                    :min="budgetMin"
                    :precision="2"
                    :step="50"
                  />
                </a-form-model-item>
                <span style="font-size:12px;margin-left:20px;">不少于 {{ budgetMin }} 元</span>
              </div>
            </a-form-model-item>

            <a-form-model-item label="投放时间">
              <a-radio-group
                style="display: block;"
                v-model="adForm.schedule_type"
                button-style="solid"
                @change="scheduleChange"
              >
                <a-radio-button
                  v-for="(item,index) in this.$global.scheduleType"
                  :key="index"
                  :value="item.value"
                >
                  {{ item.label }}
                </a-radio-button>
              </a-radio-group>
              <a-range-picker
                v-if="adForm.schedule_type === 'SCHEDULE_START_END'"
                size="default"
                valueFormat="YYYY-MM-DD"
                @change="timeChange"
                prop="schedule_type"
              />
            </a-form-model-item>

            <a-form-model-item label="付费方式">
              <a-button type="primary" disabled>
                {{ adForm.pricing === 'PRICING_OCPM' ? '按转化付费(oCPM)' : adForm.pricing === 'PRICING_CPC' ? '按点击付费(CPC)' : '按展示付费(CPM)' }}
              </a-button>
            </a-form-model-item>

            <a-form-model-item label="出价" :prop="priceBid=== '转化量' ? 'cpa_bid' : 'bid'">
              <a-input-number
                v-model="adForm[  priceBid=== '转化量' ? 'cpa_bid' : 'bid' ]"
                :min="priceMin"
                :step="50"
                :precision="2"
                :max="adForm.budget"
              />
              <span style="margin-left:10px;"> 
                提示: {{ priceBid }}出价不少于{{ priceMin }}元，不超过 
                {{ priceBid=== '转化量' ? adForm.budget : priceMax }}元
              </span>
            </a-form-model-item>

            <a-form-model-item label="过滤已转化用户" v-if="adForm.pricing === 'PRICING_OCPM' ">
              <a-radio-group
                v-model="adForm.hide_if_converted"
                button-style="solid"
              >
                <a-radio-button
                  v-for="(item,index) in this.$global.convertType"
                  :key="index"
                  :value="item.value"
                >
                  {{ item.label }}
                </a-radio-button>
              </a-radio-group>
            </a-form-model-item>

            <a-form-model-item
              label="过滤时间"
              v-if="adForm.hide_if_converted === 'CUSTOMER' || adForm.hide_if_converted === 'APP'"
              prop="converted_time_duration"
            >
              <a-radio-group
                v-model="adForm.converted_time_duration"
                button-style="solid"
              >
                <a-radio-button
                  v-for="(item,index) in this.$global.convertTime"
                  :key="index"
                  :value="item.value"
                >
                  {{ item.label }}
                </a-radio-button>
              </a-radio-group>
            </a-form-model-item>

          </div>
          <!-- 计划名称 -->
          <div class="formModel">
            <div class="formModel-title">计划名称</div>
            <a-form-model-item label="广告计划名称" prop="name">
              <a-input :maxLength="50" v-model="adForm.name"></a-input>
            </a-form-model-item>
            <a-form-model-item label="推广标识">
              <a-input :maxLength="50" v-model="adForm.logoName"></a-input>
            </a-form-model-item>
          </div>

        </a-form-model>
      </div>
    </div>

    <div class="next">
      <a-button type="primary" @click="next">
        下一步
      </a-button>
    </div>
   
  </div>
</template>

<script>
import selectPackage from "../components/selectPackage";
import Package from "../components/package";

const flowControlMode = [
  { value: 'FLOW_CONTROL_MODE_FAST',label: '优先跑量' },
  { value: 'FLOW_CONTROL_MODE_SMOOTH',label: '优先低成本' },
  { value: 'FLOW_CONTROL_MODE_BALANCE',label: '均衡投放' },
]
const flowControlModeCPC = [
  { value: 'FLOW_CONTROL_MODE_SMOOTH',label: '标准投放' },
  { value: 'FLOW_CONTROL_MODE_FAST',label: '加速投放' },
]

export default {
  components:{ selectPackage,Package },
  data(){
    return {
      accounts:[],
      campaigns:[],
      landingType:'',

      campaign:{},
      adForm:{
        // app_type:'',  // 下载的应用类型（ download_type为DOWNLOAD_URL时必填 ）
        download_type:'EXTERNAL_URL', // 下载方式
        pricing:'PRICING_OCPM',   // 投放目标
        flow_control_mode:'FLOW_CONTROL_MODE_FAST',  // 投放方式
        smart_bid_type:'SMART_BID_CUSTOM',  //出价方式
        budget_mode:'BUDGET_MODE_DAY',  //预算类型
        budget: null, // 预算
        convert_id:'', // 转化配置(后面添加)
        schedule_type:'SCHEDULE_FROM_NOW', // 投放时间类型（长期、时间段）
        // start_time:'',   //起始时间
        // end_time:'',   //结束时间
        delivery_range:'DEFAULT',  // 投放范围
        union_video_type:'ORIGINAL_VIDEO',  // 投放形式
        // download_url:'',  // 下载链接
        external_url:'',  // 落地页链接
        // quick_app_url:'',  // 快应用链接

        package:[], // 定向包
        package_id:[], // 定向包id作为标记  不需要传参

        hide_if_converted:'AD',  // 过滤已转化用户
        converted_time_duration:'THREE_MONTH',  // 过滤时间
      },
      priceBid:"转化量",
      priceMax:300,
      priceMin:0.1,
      budgetMin:300,
      flowControl:flowControlMode,// 投放方式
      rules:{
        name: [{ required: true,message:'请输入广告计划名称', trigger: 'change' }],
        smart_bid_type: [{ required: true,message:'请选择出价方式', trigger: 'change' }],
        budget: [{ required: true,message:'请输入预算', trigger: 'change' }],
        cpa_bid: [{ required: true,message:'请出价', trigger: 'change' }],
        bid: [{ required: true,message:'请出价', trigger: 'change' }],
        converted_time_duration: [{ required: true,message:'请选择过滤时间', trigger: 'change' }]
      },
      is_package:false, // 显示定向包
    }
  },
  watch:{
    // 预留head信息
    '$store.state.batchCreated.campaign':function (campaign) {
      this.accounts = campaign.account_id
      this.campaigns = campaign.campaign_id
      this.landingType = campaign.landing_type
    },
    // 判断投放范围  (预防返回上一步)
    'adForm.delivery_range':function (delivery_range) {
      if( delivery_range === 'UNION' ) this.adForm.union_video_type = 'ORIGINAL_VIDEO'
    },
    'adForm.hide_if_converted':function (hideIfConverted) {
      if( hideIfConverted === 'APP' || hideIfConverted === 'CUSTOMER' ) this.adForm.converted_time_duration = 'THREE_MONTH'
    },
    // 投放目标  （暂时无用）
    'adForm.pricing':function (params) {
      this.priceBid = params=== 'PRICING_OCPM' ? '转化量' : params=== 'PRICING_CPC' ? '点击量 ' : '展示量'
      this.flowControl =  params === 'PRICING_OCPM' ? flowControlMode : flowControlModeCPC
      if( params === 'PRICING_OCPM' ){  // 转化量
        this.adForm.flow_control_mode = 'FLOW_CONTROL_MODE_FAST'
        this.priceMin = 0.1  //最小出价
        this.priceMax = this.adForm.budget //最大出价
        this.budgetMin = 300  // 最小预算
      }else if( params === 'PRICING_CPC' ){  // 点击量
        this.adForm.flow_control_mode = 'FLOW_CONTROL_MODE_SMOOTH'
        this.priceMin = 0.2
        this.priceMax = 100
        this.budgetMin = 100
      }else if( params === 'PRICING_CPM' ){  //展示量
        this.adForm.flow_control_mode = 'FLOW_CONTROL_MODE_SMOOTH'
        this.priceMin = 4
        this.priceMax = 100
        this.budgetMin = 100
      }
    }
  },
  created(){
    if( Object.keys(this.$route.query).length !== 0 ){
      this.adForm = Object.assign( this.adForm,JSON.parse(this.$route.query.data).adForm ) 
    }
  },
  methods:{
    // 投放方式 删除字段
    pricingChange(even){
      if( even.target.value === 'PRICING_OCPM' ){
        delete this.adForm.bid // 删除出价
        this.adForm.hide_if_converted = 'AD'
      }else {
        delete this.adForm.hide_if_converted // 删除 过滤已转化用户
        delete this.adForm.cpa_bid
      }
    },
    // 预算类型
    budgetModeChange(value){
      this.adForm.budget_mode = value
    },
    // 投放时间模式
    scheduleChange(e){
      if(e.target.value === 'SCHEDULE_FROM_NOW'){
        if( this.adForm.start_time ){
          delete this.adForm.start_time
          delete this.adForm.end_time
        }
      }
    },
    // 投放时间
    timeChange(value){
      this.adForm.start_time = value[0]
      this.adForm.end_time = value[1]
    },
    // 确认定向包
    getAllPackage(checkedAll){
      checkedAll.forEach( item => {
        if( this.adForm.package_id.indexOf(item.id) === -1 ){
          this.adForm.package_id.push(item.id) //利用id标记已有定向包
          this.adForm.package.push(item)
        }
      });
      this.is_package = false
    },
    // 删除定向包
    closePackage(item,index){
      if( this.adForm.package_id.indexOf(item.id) !== -1 ){
        this.adForm.package_id.splice(this.adForm.package_id.indexOf(item.id),1)
        this.adForm.package.splice(index,1)
      }else {
        alert('错误信息')
      }
    },
    downloadTypeChang(e){
      if( e.target.value === 'DOWNLOAD_URL' ){
        this.adForm.download_url = ''
        delete this.adForm.external_url
      }else if( e.target.value === 'EXTERNAL_URL' ) {
        this.adForm.external_url = ''
        delete this.adForm.download_url
      }
    },
    // 下一步  vuex储存   账号、广告组(数组对象)
    next(){
      this.$refs['ruleForms'].validate(valid => {
        if (valid) {
          let adFormCopy = this.$deepCopy(this.adForm)
          if( adFormCopy.package.length === 0) return alert('请选择定向包')
          if( adFormCopy.schedule_type === 'SCHEDULE_START_END' ){
            if( !adFormCopy.hasOwnProperty('start_time') && !adFormCopy.hasOwnProperty('ent_time')) return alert('请投放时间')
          }
          // 如果投放范围是默认，则删除投放形式字段
          if( adFormCopy.delivery_range === 'DEFAULT' ) delete adFormCopy.union_video_type
          // 如果过滤转化用户不是 公司账户、app 删除过滤时间字段
          if( !(adFormCopy.hide_if_converted === 'CUSTOMER' || adFormCopy.hide_if_converted === 'APP') ) delete adFormCopy.converted_time_duration
          // 如果是 销售线索收集 则删除 推广平台pingtai

          delete adFormCopy.package_id // 删除定向包映射id

          localStorage.setItem('ad', JSON.stringify(adFormCopy))
          this.$store.commit('SET_AD',adFormCopy ); // vuex储存数据
          this.$store.commit('SET_AD_FORM',this.adForm ); // 回显数据
          this.$emit('nexts')
        } else {
          return false;
        }
      });
    }
  }
}
</script>

<style lang="less" scoped>
  // 禁用选项 选中颜色
  ::v-deep .ant-radio-button-wrapper-checked{
    color: black;
  }
  .ant-list-item{ // list
    padding: 1px;
  }
  // 头部提示部分
  .title{
    width: 100%;
    display: flex;
    .title-row{
      flex: 1;
      display: flex;
      padding: 5px 10px;
      border: 1px solid #F0F2F5;
      span{
        // width: 30%;
        margin-right: 20px;
        text-align: start;
        font-size: 12px;
      }
      .title-content{
        // width: 70%;
        max-height: 100px;
        overflow-y: auto;
      }
      
    }
  }
</style>